<template>
  <div>
    <a-form :form="form" style="max-width: 600px; margin: 10px auto 0;">
      <a-result :title="title" :status="status" style="max-width: 600px; margin: 0px auto 0;">
        <div class="information">
          <a-form-item
            label="订单编号"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['code']">{{ form.getFieldValue('code') }}</p>
          </a-form-item>
          <a-form-item
            label="供应商"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['supplier']">{{ form.getFieldValue('supplier') }}</p>
          </a-form-item>
          <a-form-item
            label="物品列表"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <stuffInfo v-if="stuff" :length="subLength" :hasDeleteButton="false" :hasAddButton="false" :disabled="true"/>
          </a-form-item>
          <a-form-item
            label="总金额"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['money']">{{ form.getFieldValue('money') }}</p>
          </a-form-item>
          <a-form-item
            label="采购员"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['purchaser']">{{ form.getFieldValue('purchaser') }}</p>
          </a-form-item>
          <a-form-item
            label="采购时间"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['purchaseTime']">{{ form.getFieldValue('purchaseTime') }}</p>
          </a-form-item>
          <a-form-item
            label="采购备注"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['purchaseRemark']">{{ form.getFieldValue('purchaseRemark') }}</p>
          </a-form-item>
          <a-form-item
            label="审核员"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['auditor']">{{ form.getFieldValue('auditor') }}</p>
          </a-form-item>
          <a-form-item
            label="审核时间"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['auditTime']">{{ form.getFieldValue('auditTime') }}</p>
          </a-form-item>
          <a-form-item
            label="审核信息"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            class="stepFormText">
            <p v-decorator="['auditRemark']">{{ form.getFieldValue('auditRemark') }}</p>
          </a-form-item>
          <a-divider />
        </div>
        <template #extra>
          <a-button type="primary" @click="toAdd">再来一单</a-button>
          <a-button style="margin-left: 8px" @click="toList">订单管理</a-button>
        </template>
      </a-result>
    </a-form>
  </div>
</template>

<script>
import stuffInfo from './stuffInfo'
import { detail } from '@/api/purchase'
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'Step3',
  props: {
    code: {
      type: String,
      default: null
    }
  },
  components: { stuffInfo },
  computed: {
    title () {
      if (this.data.status === 0) {
        return '审核成功'
      } else if (this.data.statsu === 1) {
        return '审核失败'
      } else if (this.data.status === 2) {
        return '正在审核'
      } else {
        return 'error'
      }
    },
    status () {
      if (this.data.status === 0) {
        return 'success'
      } else if (this.data.statsu === 1) {
        return 'error'
      } else if (this.data.status === 2) {
        return 'info'
      } else {
        return 'error'
      }
    },
    subLength () {
      const supp = this.data.supplies || []
      return supp.length || 1
    }
  },
  data () {
    return {
      stuff: false,
      data: {},
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this)
    }
  },
  created () {
    this.getData(this.code)
  },
  methods: {
    getData (code) {
      const _this = this
      detail(code)
      .then(res => {
        _this.data = res.data
        _this.stuff = true
        _this.handleData()
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取数据失败')
      })
    },
    handleData () {
      const tmp = cloneDeep(this.data)
      // 整理数据
      const name = []
      const type = []
      const amount = []
      const price = []
      const unit = []
      for (let i = 0; i < tmp.supplies.length; i++) {
        name.push(tmp.supplies[i].name)
        type.push(tmp.supplies[i].type)
        amount.push(tmp.supplies[i].amount)
        price.push(tmp.supplies[i].price)
        unit.push(tmp.supplies[i].unit)
      }
      tmp.name = name
      tmp.type = type
      tmp.amount = amount
      tmp.price = price
      tmp.unit = unit
      delete tmp.supplies
      delete tmp.id
      delete tmp.status
      // 注册 赋值
      const _this = this
      _this.form.getFieldDecorator('code')
      _this.form.getFieldDecorator('purchaser')
      _this.form.getFieldDecorator('purchaseTime')
      for (let i = 0; i < this.subLength; i++) {
        _this.form.getFieldDecorator(`name[${i}]`)
        _this.form.getFieldDecorator(`type[${i}]`)
        _this.form.getFieldDecorator(`unit[${i}]`)
        _this.form.getFieldDecorator(`price[${i}]`)
        _this.form.getFieldDecorator(`amount[${i}]`)
      }
      _this.$nextTick(() => {
        _this.form.setFieldsValue(tmp)
      })
    },
    toAdd () {
      this.$emit('finish')
    },
    toList () {
      this.$router.push('/purchase/purchaseOrder')
    }
  }
}
</script>
<style lang="less" scoped>
.stepFormText {
  margin-bottom: 5px;
  /deep/ .ant-form-item-label {
    line-height: 30px;
  }
  /deep/ .ant-form-item-control {
    line-height: 30px;
  }
}
p {
  margin-bottom: 0px;
}
/deep/ .ant-divider-horizontal {
  margin-top: 5px;
  margin-bottom: 5px;
}
.ant-result {
  padding-top: 32px;
}
</style>
